<template>
  <view class="container">
    <u-navbar
      :is-fixed="true"
      :border-bottom="false"
      :is-back="true"
      :background="{ background: '#fff' }"
      title="添加食谱"
      title-color="#000"
    >
    </u-navbar>
		<u-toast ref="uToast" />
    <view class="content">
      <u-form :model="form" ref="uForm" :label-width="150">
        <u-form-item label="名称"
          ><u-input v-model="form.name" placeholder="请输入食谱名称"
        /></u-form-item>
        <u-form-item label="食谱类型">
          <u-input v-model="form.menuType" placeholder="请选择" type="select" @click="showPicker" />
          <u-action-sheet
            :list="typeList"
            v-model="show"
            @click="chooseType"
          ></u-action-sheet>
        </u-form-item>
				<u-form-item label="内容">
					<u-input type="textarea" v-model="form.desc" placeholder="请输入食谱内容"/>
        </u-form-item>
				<u-form-item label="照片">
					<u-upload :maxCount="3" ref="uUpload" :action="action" :file-list="fileList" ></u-upload>
        </u-form-item>
      </u-form>
    </view>
    
    <button class="submit" @click="doAdd">添加</button>
  </view>
</template>

<script>
import { addMenu } from '../../api/system/api'
export default {
  data() {
    return {
			action: 'http://127.0.0.1:3000/upload',
			fileList: [],
      form: {},
      show: false,
			typeList: [
				{
					text: '月经'
				},
				{
					text: '润肺利咽'
				},
				{
					text: '发散解表'
				},
				{
					text: '清热生津'
				},
        {
					text: '解热除烦'
				},
				{
					text: '补气养血'
				},
				{
					text: '清热解毒'
				},
				{
					text: '祛风除湿'
				},
        {
					text: '补肾益肾'
				},
				{
					text: '健脾益脾'
				},
				{
					text: '疏肝理气'
				},
				{
					text: '降脂降压'
				},
				{
					text: '润肤养颜'
				}
			]
    };
  },
  created() {
    uni.getStorage({
      key:'userInfo',
      success: (res) => {
        this.userInfo = res.data;
      }
    })
  },
  methods: {
		showPicker() {
			this.show = true
		},
    chooseType(index) {
      this.form.menuType = this.typeList[index].text;
    },
    doAdd() {
      if (!this.form.name) {
				this.$refs.uToast.show({
					title: '请输入名称',
					type: 'error',
				})
				return
			}
      if (!this.form.menuType) {
				this.$refs.uToast.show({
					title: '请选择类型',
					type: 'error',
				})
				return
			}
      if (!this.form.desc) {
				this.$refs.uToast.show({
					title: '请输入内容',
					type: 'error',
				})
				return
			}
      if (this.$refs.uUpload.lists.length === 0) {
				this.$refs.uToast.show({
					title: '请上传照片',
					type: 'error',
				})
				return
      }
      let form = JSON.parse(JSON.stringify(this.form))
      form.imgs = JSON.stringify(this.$refs.uUpload.lists.map(v => v.response.imgName))
      addMenu(form).then(res => {
        if (res.code === 200) {
          this.$refs.uToast.show({
            title: '添加成功!',
            type: 'success',
          })
          uni.$emit('refreshMenu', {
            refresh: true
          })
          setTimeout(() => {
            uni.navigateBack({
              delta: 1
            });
          }, 500)
        } else {
          this.$refs.uToast.show({
            title: res.msg,
            type: 'error',
          })
        }
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #fff;
  min-height: 100vh;
  overflow: hidden;
  padding: 2rpx;
}
.block {
  padding: 20rpx;
  height: 120rpx;
  width: 100%;
  border: 1rpx solid lightgray;

  .avator {
    width: 100%;
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
  }

  .position {
    width: 20rpx;
    height: 20rpx;
  }
}
.title {
  width: 100%;
  text-align: center;
  font-weight: bold;
  margin: 40rpx 0;
  font-size: 32rpx;
}

.each-row {
	width: 100%;
	padding: 0 20rpx;
	height: 100rpx;
	line-height: 100rpx;
	border-bottom: 1rpx solid #999;
}


.content {
  padding: 30rpx;
  width: 100%;
}

.submit {
	margin: 30rpx auto;
	border: none;
	width: calc(100% - 60rpx);
	height: 86rpx;
	line-height: 86rpx;
	box-sizing: border-box;
	border-radius: 15rpx;
	background-color: #e58b8a;
	color: #ffffff;
}
</style>
